<template>
    <div class="page-center">
        <div class="mt-30 mb-30 clearfix">
            <div class="left-section">
                <div class="title clearfix">
                    <h2>主营业务</h2>
                    <span></span>
                    <span></span>
                </div>
                <div class="mt-20">
                    <el-input placeholder="可以输入货号、中文名、英文名、CAS号、分子量、分子式搜索" v-model="key">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </div>
                <p class="desc">专注杂质对照品，API，稳定性同位素。服务全球多个国家和地区</p>
                <div class="swiper-prev-next">
                    <div class="button" @click="priveSlide"><i class="fa fa-arrow-left"></i></div>
                    <div class="button" @click="nextSlide"><i class="fa fa-arrow-right"></i></div>
                </div>
            </div>
            <div class="right-section">
                <div class="swiper-container swiper-business">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item, index) in slides" :key="index">
                            <div class="card">
                                <div class="mb-20">
                                    <a :href="`/products/${item.name}`">
                                        <img :src="item.imgUrl" :alt="item.name" />
                                    </a>
                                </div>
                                <a :href="`/products/${item.name}`" class="title"
                                    ><h3>{{ item.label }}</h3></a
                                >
                                <p class="desc">
                                    <a :href="`/products/${item.name}`"
                                        >20000+现货供应，提供COA、NMR、MS、HPLC以满足申报要求</a
                                    >
                                </p>
                                <p class="circle">
                                    <a :href="`/products/${item.name}`">
                                        <i class="fa fa-plus"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import { Message } from 'element-ui'
import router from '@/router'
const key = ref('')
const search = () => {
    console.log(key.value)
    if (!key.value) {
        return Message.info('请输入关键字！')
    }
    router.push({
        name: 'search',
        query: {
            key: key.value,
        },
    })
}

const slides = [
    {
        imgUrl: require('@/assets/imgs/221207104331_2679.png'),
        name: 'impurity',
        label: '杂质对照品',
    },
    {
        imgUrl: require('@/assets/imgs/221207104453_5896.png'),
        name: 'isotope',
        label: '稳定同位元素',
    },
    {
        imgUrl: require('@/assets/imgs/221207104436_5781.png'),
        name: 'api',
        label: 'API',
    },
]
const swiperBusiness = ref(null)

onMounted(() => {
    swiperBusiness.value = new Swiper('.swiper-business', {
        slidesPerView: 3,
        slidesPerGroup: 1,
        slidesBetween: 0,
        loop: true,
    })
})

const priveSlide = () => {
    swiperBusiness.value.slidePrev()
}
const nextSlide = () => {
    swiperBusiness.value.slideNext()
}
</script>
<style lang="scss" scoped>
.left-section {
    float: left;
    width: 25%;
    h2 {
        letter-spacing: 4px;
        color: #000;
        font-size: 32px;
        margin-bottom: 15px;
    }
    .title {
        span {
            width: 70px;
            float: left;
            display: inline-block;
            transition: all 0.5s;
            height: 5px;
            &:first-of-type {
                background: #0d87dc;
                height: 5px;
                margin-right: 2px;
            }
            &:last-child {
                background: #993b2f;
                height: 5px;
            }
        }
    }
    &:hover {
        .title {
            span {
                width: 50px;
            }
        }
    }
    .swiper-prev-next {
        .button {
            background: #efefef;
            height: 40px;
            width: 40px;
            border-radius: 100px;
            line-height: 40px;
            text-align: center;
            float: left;
            cursor: pointer;
            margin-right: 10px;
            &:first-child,
            &:hover {
                background: #0d87dc;
                color: #fff;
            }
        }
    }

    .desc {
        margin: 15px 0;
        font-size: 14px;
        color: #666;
    }
}
.right-section {
    float: right;
    width: 75%;
    color: #333;
    .card {
        text-align: center;

        img {
            width: 70px;
            height: 70px;
            transition: transform 0.5s ease;
            &:hover {
                transform: scale(1.1);
            }
        }

        .tltle {
            color: #333;
            font-size: 20px;
        }

        .desc {
            color: #333;
            font-size: 14px;
            margin-top: 30px;
        }

        a:hover {
            color: #00a7e1;
        }

        .circle {
            margin-top: 30px;
            width: 50px;
            height: 50px;
            display: inline-block;
            text-align: center;
            line-height: 45px;
            background: #fff;
            color: #000;
            border: 5px solid #0d87dc;
            border-radius: 50px;

            i {
                font-size: 16px;
                font-weight: 600;
                transition: transform 1.5s ease;
            }

            &:hover {
                i {
                    transform: rotate(360deg);
                }
            }
        }
    }
}
</style>
